<template>
  <div class="container">
    <div style="display: flex">
      <h3>回复消息：</h3>
      <el-tabs
        @tab-click="handleClick"
        v-model="getMsgType"
        type="border-card"
        style="flex: 1"
      >
        <el-tab-pane name="text" label="文本消息">
          <template #label>
            <span><i class="el-icon-document"></i> 文本消息</span>
          </template>
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入文本消息"
            v-model="baseInfo.content"
          ></el-input>
        </el-tab-pane>
        <el-tab-pane name="image" label="图片消息">
          <template #label>
            <span><i class="el-icon-picture-outline"></i> 图片消息</span>
          </template>

          <div style="display: flex">
            <template v-if="!baseInfo.img_url">
              <el-card
                :body-style="{ lineHeight: '200px' }"
                class="box-card"
                style="
                  height: 250px;
                  flex: 1;
                  margin-right: 15px;
                  display: flex;
                  justify-content: center;
                  align-item: center;
                "
              >
                <el-button type="success" icon="More" @click="openMaterial"
                  >素材库选择</el-button
                >
              </el-card>
              <el-card
                :body-style="{ textAlign: 'center' }"
                class="box-card"
                style="
                  height: 250px;
                  flex: 1;
                  display: flex;
                  justify-content: center;
                  align-item: center;
                "
              >
                <ImageUpload
                  :uploadImgUrl="uploadImgToWx"
                  v-model="baseInfo.img_url"
                  @input="imgUploadSuccess"
                >
                  <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
                  <template #tip>
                    <div class="el-upload__tip">
                      只能上传jpg,png,jpeg,gif文件，且不超过500kb
                    </div>
                  </template>
                </ImageUpload>
              </el-card>
            </template>
            <div
              v-else
              style="
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-item: center;
              "
            >
              <el-image
                fit="fill"
                style="width: 200px; height: 200px; margin: 0 auto"
                :src="baseInfo.img_url"
              >
              </el-image>
              <div style="text-align: center; margin-top: 10px">
                <el-button
                  @click="onDelImg"
                  type="danger"
                  icon="Delete"
                  circle
                ></el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane name="news" label="图文消息">
          <template #label
            ><span><i class="Message"></i> 图文消息</span></template
          >
          <div class="d_f ai_c ju_c">
            <template v-if="baseInfo.newsItem && baseInfo.newsItem.url">
              <div
                style="
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-item: center;
                "
              >
                <el-image
                  fit="fill"
                  style="width: 200px; height: 200px; margin: 0 auto"
                  :src="baseInfo.newsItem.image"
                >
                </el-image>
                <p style="text-align: center">{{ baseInfo.newsItem.title }}</p>
                <el-form style="margin: 0 auto">
                  <el-form-item label="图文描述" label-width="80px">
                    <el-input
                      style="width: 300px"
                      placeholder="请输入描述"
                      v-model="getDescription"
                    ></el-input>
                  </el-form-item>
                </el-form>

                <div style="text-align: center; margin-top: 10px">
                  <el-button
                    @click="onDelNews"
                    type="danger"
                    icon="Delete"
                    circle
                  ></el-button>
                </div>
              </div>
            </template>
            <el-button v-else type="success" icon="More" @click="openMaterial"
              >素材库选择</el-button
            >
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
      </el-tabs>
    </div>
    <el-dialog
      title="素材列表"
      :close-on-click-modal="false"
      v-model="isShowMaterial"
      width="66%"
      append-to-body
    >
      <Material :type="baseInfo.msg_type" @onItem="selectMaterial"></Material>
    </el-dialog>
  </div>
</template>

<script>
import { uploadToWx } from "@/api/mpManage/mpUpload";
import Material from "@/cpns/material";
import _ from "lodash";
export default {
  name: "wx-reply",
  components: { Material },
  data() {
    return {
      uploadImgToWx: uploadToWx,
      isShowMaterial: false,
    };
  },
  props: {
    baseInfo: {
      type: Object,
      required: true,
    },
  },
  computed: {
    getMsgType: {
      get() {
        return this.baseInfo.msg_type || "text";
      },
      set(newValue) {
        this.baseInfo.msg_type = newValue;
      },
    },
    getDescription: {
      get() {
        return this.baseInfo.newsItem.description || "";
      },
      set(newValue) {
        this.baseInfo.newsItem.description = newValue;
        // this.$set(this.baseInfo.newsItem, "description", newValue);
        console.log(this.baseInfo);
      },
    },
  },
  methods: {
    handleClick(value) {
      console.log("handleClick");
    },
    openMaterial() {
      console.log("openMaterial");
      this.isShowMaterial = true;
    },
    selectMaterial(item) {
      console.log(111, this.baseInfo.newsItem);
      // return false;
      const type = this.baseInfo.msg_type;
      if (type == "image") {
        this.baseInfo.media_id = item.media_id;
        this.baseInfo.img_url = item.url;
        // this.baseInfo.msg_type = "image";
      }
      if (type == "news") {
        const newObj = {
          title: item.title,
          url: item.url,
          image: item.thumb_url,
        };
        // 初始化newsItem填入数据
        const newsItem = _.assign(newObj, this.baseInfo.newsItem);
        newsItem.description = "";
        this.baseInfo.newsItem = newsItem;
        // this.$set(this.baseInfo, "newsItem", newsItem);
        // this.$set(this.baseInfo.newsItem, "description", "");
      }
      console.log(this.baseInfo.newsItem);
      this.isShowMaterial = false;

      // this.$emit("selectMaterial", item, index);
    },
    // selectNewsMaterial(item) {
    //   console.log(item);
    //   this.baseInfo.msg_type = "news";
    //   this.baseInfo.newsItem = {
    //     title: item.title,
    //   };
    // },
    onDelImg() {
      // this.$set(this.baseInfo, "img_url", "");
      this.baseInfo.img_url = "";
    },
    onDelNews() {
      this.baseInfo.newsItem = {};
    },
    imgUploadSuccess(res) {
      console.log(res);
      if (res.code == 200) {
        const data = res.data;
        this.baseInfo.img_url = data.url;
        this.baseInfo.media_id = data.media_id;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
